import { reactive, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

export default function useTest() {
  const route = useRoute()
  const store = useStore()
  console.log(route.query)

  const state = reactive({
    count: 1
  })

  const increment = () => {
    state.count++
  }

  const updateNumber = () => {
    // store.commit('SET_NUMBER', state.count * 100)
    store.dispatch('setNumber', state.count * 100)
  }

  const doubleCount = computed(() => {
    return state.count * 2
  })

  const number = computed(() => store.state.number)

  // const aa = computed(() => store.state.a.aa)
  const aa = computed(() => store.getters.aaValue)

  const updateAA = () => {
    store.commit('SET_AA', store.state.a.aa + 1)
  }

  watch(() => state.count, () => {
    console.log('state.count chage:', state.count)
  })

  return {
    state,
    doubleCount,
    increment,
    number,
    updateNumber,
    aa,
    updateAA
  }
}
